<%@page import="it.crosato.stage.shared.objects.EntityDefinition"%>
<%@page import="java.util.Vector"%>
<html>

<head>
	<title>CoMeta - Albero filogenetico</title>
	<link type="text/css" rel="stylesheet" href="css/web.css" media="screen" />
	<script type="text/javascript">
	window.onload=function(){
		showUPGMA();
	}
	function showUPGMA() {
		document.getElementById("nj").style.display="none";
		document.getElementById("upgma").style.display="block";
	}
	function showNJ() {
		document.getElementById("upgma").style.display="none";
		document.getElementById("nj").style.display="block";
	}
	</script>
</head>

<body>

	<div class="app">

	<div class="title">
		<h1>CoMeta</h1>
	</div>
	
	<div class="content">
	
		<div class="side">
			<form action="selection.html" method="get">
				<%long time = Long.class.cast(session.getAttribute("time")); %>
				<input type="hidden" name="time" value="<%out.print(time);%>">
				<input type="image" src="pics/freccia-sx.png">
			</form>
		</div>
		
		<div class=result>
			<div class="navigation">
				<ul>
				    <li><a href="pathways.html">Vie metaboliche</a></li>
				    <li><a href="sets.html">Insiemi</a></li>
					<li><a href="invariants.html">Reti di Petri</a></li>
				    <li><a href="mapping.html">Matrici distanza</a></li>
				    <li id="activelink"><a href="tree.html">Albero filogenetico</a></li>
				</ul>
			</div>
			<div class="resultBox">
				<div class="treeType">
					<label for="UPGMA">UPGMA</label>
					<input type="radio" name="treeType" id="UPGMA" checked="checked" onclick="javascript:showUPGMA()" />
					<input type="radio" name="treeType" id="NJ" onclick="javascript:showNJ()" />
					<label for="NJ">Neighbour Joining</label>
				</div>
				<% @SuppressWarnings("unchecked")
 				Vector<EntityDefinition> organisms = (Vector<EntityDefinition>)session.getAttribute("selectedOrganisms"); %>
				<div class="treeBox" id="upgma">
					<div class="tree">
						<img src="upgma.html">
					</div>
					<div class="legenda">
						<ul>
						<%for (int i=0; i < organisms.size(); i++) {
 							out.println("<li><strong>" + organisms.get(i).getId() + "</strong> = " +
 									organisms.get(i).getDescription() + "</li>");
 						}%>
						</ul>
					</div>
				</div>
				<div class="treeBox" id="nj">
					<div class="tree">
						<img src="nj.html">
					</div>
					<div class="legenda">
						<ul>
						<%for (int i=0; i < organisms.size(); i++) {
 							out.println("<li><strong>" + organisms.get(i).getId() + "</strong> = " +
 									organisms.get(i).getDescription() + "</li>");
 						}%>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="footer">
		<span>Strumento per la comparazione di reti metaboliche</span>
	</div>
	
	</div>

</body>

</html>